import React, { useEffect } from 'react';

function append(content, container = 'content', tagname = 'p') {
  const tag = document.createElement(tagname);
  const text = document.createTextNode(content);
  tag.appendChild(text);
  document.getElementById(container).appendChild(tag);
}

function templates() {
  const name = 'tom';
  const gender = true;

  function myTagFunc(strings, n, g) {
    return `${strings[0]} ${n} ${strings[1]} ${g} ${strings[2]}`;
  }

  const result = myTagFunc`hey, ${name} is a ${gender}.`;

  append(result);
}

export default function Async() {
  useEffect(templates, null);

  return (
    <div id="content">
      <p>模板字符串</p>
    </div>
  );
}
